/**
 * This is the directory controller. It manages directories and changes which ones are displayed.
 * @param {Object} $scope The angular scope object.
 */
function DirectoryController($scope, $http) {
	// Get the directories and save them into the scope.
	$http({ method: 'GET', url: 'resources/json/home_directory.json', cache: true }).success(function(data) {
		$scope.directories = data;
	});
};

// The dependency injections for when the file is minified.
//DirectoryController.$inject = ['$scope', '$http'];


// Create the directory module.
angular.module('directoryModule', [])

	// Create the alignment directive.
	.directive('alignment', function() {
		return {
			restrict: 'E',
			scope: {
				horizontal: '@',
				vertical: '@'
			},
			template: '<align class="inner" style="text-align:{{horizontal}};vertical-align:{{vertical}};">' +
					  	'<align class="wrapper" ng-transclude></align>' +
					  '</align>',
			transclude: true
		};
	})

	// Create the directory directive.
	.directive('directory', function() {
		return {
			link: function(scope, element, attributes) {
				// ------------------
				// Adjust the scope.
				// ------------------

				// Default scope values.
				scope.hover = false;
				scope.selected = false;

				// Add watchers
				scope.$watch('hover', toggleHoverClass);
				scope.$watch('selected', toggleSelectClass);

				// Add scope directive functions.
				scope.stylizeIcon = stylizeIcon;

				function toggleHoverClass(addClass) {
					element.toggleClass('hover', addClass);
				};

				function toggleSelectClass(addClass) {
					element.toggleClass('selected', addClass);
				};

				function stylizeIcon() {
					return { borderColor: scope.selected && attributes.highlight };
				};

				// ------------------
				// Adjust the element.
				// ------------------
				
				// Setup the touch screen events.
				if (Modernizr.touch) {
					element
						.bind('touchenter touchleave', toggleHover);
				}

				// Setup the cursor events.
				else {
					element
						.bind('mouseover mouseout', toggleHover)
						.bind('click', toggleSelect)
						.bind('click', toggleAction);
				}

				function toggleHover() {
					scope.hover = !scope.hover;
					scope.$digest();
				};

				function toggleSelect() {
					scope.selected = !scope.selected;
					scope.$digest();
				};

				function toggleAction() {

				};
			},
			restrict: 'E',
			scope: {
				actions: '=',
				highlight: '@',
				name: '@' 
			},
			template: '<action ng-repeat="action in actions"></action>' +
					  '<alignment horizontal="center" vertical="middle">' +
						  '<icon ng-style="stylizeIcon()"></icon>' +
						  '<name>{{name}}</name>' +
					  '</alignment>'
		};
	})

	// Create the action directive.
	.directive('action', function() {
		return {
			restrict: 'E',
			scope: {
				name: '@'
			}
		};
	});